<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>反弹小球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			body{
				/*background-image: url(img/bg.jpg);*/
				background-size: 100%;
				overflow: hidden;
			}
			div {
				position: absolute;
				/*top: 0px;*/
				/*left: 0px;*/
				/*border: 1px solid;*/
				width: 80px;
				height: 80px;
				overflow: hidden;
				/*background-image: url(../img/ch0.png),url(../img/ch1.png),url(../img/ch2.png);*/
				/*background-size: 100%;*/
			}
			div>img{
				width: 100%;
				display: block;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
		window.onload=function(){
			setInterval("moveDiv()",8);
			setInterval("createDiv()",1000);
		}
		function moveDiv(){
				var clientX=document.documentElement.clientWidth;
				var clientY=document.documentElement.clientHeight;
				var div = document.getElementsByTagName("div");
				for ( i =0; i<div.length;i++) {
					var xSpeeds =parseInt( div[i].getAttribute("xSpeed"));
					var ySpeeds =parseInt( div[i].getAttribute("ySpeed"));
					var _top =parseInt( div[i].getAttribute("_top"));
					var _left =parseInt( div[i].getAttribute("_left"));
					if (_top > clientY-80-Math.abs(ySpeeds) || _top<0) {
						ySpeeds *= (-1);
					}
					if (_left > clientX-80-Math.abs(xSpeeds)||_left<0) {
						xSpeeds *= (-1);
					}
				_left+=xSpeeds;
				_top+=ySpeeds;
				div[i].style.top=_top + "px";
				div[i].style.left=_left+"px";
				div[i].setAttribute("xSpeed",xSpeeds);
				div[i].setAttribute("ySpeed",ySpeeds);
				div[i].setAttribute("_top",_top);
				div[i].setAttribute("_left",_left);
				}
				
			}
			var c = 0;
			function createDiv(){
				var div = document.createElement("div");
//				div.style.opacity=Math.random()*0.5+0.5;
				var img1 = document.createElement("img");
				img1.src = "img/ch0.png";
				var img2 = document.createElement("img");
				img2.src = "img/ch1.png";
				var img3 = document.createElement("img");
				img3.src = "img/ch2.png";
				div.appendChild(img1);
				div.appendChild(img2);
				div.appendChild(img3);
				var img = div.getElementsByTagName("img");
				for (var i = 0;i<img.length;i++) {
					img[i].style.opacity = Math.random();
				}
				var clientX=document.documentElement.clientWidth;
				var clientY=document.documentElement.clientHeight;
				div.setAttribute("xSpeed",parseInt(Math.random()*3+1));
				div.setAttribute("ySpeed",parseInt(Math.random()*3+1));
				if (c ==0) {
					div.setAttribute("_left",0);
					div.setAttribute("_top",parseInt(Math.random()*(clientY-80)));
					c = 1;
				} else if(c == 1){
					div.setAttribute("_left",parseInt(Math.random()*(clientX-80)));
					div.setAttribute("_top",0);
					c = 2;
				}else if(c==2){
					div.setAttribute("_left",clientX-80);
					div.setAttribute("_top",parseInt(Math.random()*(clientY-80)));
					c = 3;
				}else if(c == 3){
					div.setAttribute("_left",parseInt(Math.random()*(clientY-80)));
					div.setAttribute("_top",clientY-80);
					c = 0;
				}
				document.body.appendChild(div);
			}
			function changeColor(){
				
			}
		</script>
	</head>

	<body>
		<!--<div xSpeed="1" ySpeed="1" _left="0" _top="0"></div>-->
	</body>

</html>